<template>
    <div>
      <div class="c-title">
<!--        <div class="logo">-->
<!--          <img src="" width="42" height="32" alt="">-->
<!--        </div>-->
<!--        <p class="name"></p>-->
      </div>

      <div class="c-login">
        <h1><span>用户注册</span>&nbsp;&nbsp;
          &nbsp;
          &nbsp;
          &nbsp;
          &nbsp;
          &nbsp;
          &nbsp;
          &nbsp;
          &nbsp;
          <span style="color: #00a5e0" ><router-link to="/businessRegister">商家注册</router-link></span></h1>
        <form class="loginForm">
          <input type="text" v-model="registerForm.account" class="userLogo" placeholder="请输入账号"  />
          <input type="text"  v-model="registerForm.phone" placeholder="请输入手机号码"  />
          <input type="text"  v-model="registerForm.name" class="userLogo" placeholder="请输入昵称" />
          <input type="password"  v-model="registerForm.password" placeholder="请输入密码"  />
          <input type="password" @change="checkPassword" v-model="registerForm.passwordTwo" placeholder="请输入确认密码"  />
          <span v-show="!checkPasswordFlag" style="position: relative; margin-left: -20px;font-size: 12px;color: red">两次密码不一致</span>
<!--          <input type="text" class="userLogo" placeholder="请输入昵称" lay-verify="required|userName" />-->
<!--          <input type="password" placeholder="请输入密码" lay-verify="required" />-->

          <input type="button" @click.prevent="userRegister" value="注册" id="regBtn" />
        </form>
      </div>
    </div>
</template>

<script>
    export default {
        name: "UserRegister",
        data(){
          return {
            checkPasswordFlag: true,
            registerForm:{
              account:"",
              name: "",
              password: "",
              phone: "",
              passwordTwo:""
            }
          }
        },
        methods: {
          checkPassword() {
            if (this.registerForm.passwordTwo == this.registerForm.password) {
              this.checkPasswordFlag = true;
            } else {
              this.checkPasswordFlag = false;
            }
          },
          userRegister(){
            this.checkPassword();
            if(this.checkPasswordFlag){
              this.$http.post("/user/userRegister",{
                account: this.registerForm.account,
                name: this.registerForm.name,
                password: this.registerForm.password,
                phone: this.registerForm.phone
              }).then(resp=>{
                if(resp.data.code==200) {
                  this.$message({
                    showClose: true,
                    message: resp.data.message,
                    type: 'success'
                  });
                  this.$router.push("/userLogin");
                }
              });
            }

          }
        }
    }
</script>

<style scoped>
  @import url("../../static/css/user-register/base.css");
  @import url("../../static/css/user-register/frozenui.css");
  @import url("../../static/css/user-register/login.css");
</style>
